import { useEffect } from 'react';
import { useSelector, useStore } from 'react-redux';

import { changeFilmList } from '../redux/features/filmSlice';

import { findFilmsPage } from '@/api/MaiZuo';

export const useNowPlaying = () => {
  const list = useSelector((state) => state.FilmReducer.list);
  const cityId = useSelector((state) => state.CityReducer.id);

  const { dispatch } = useStore();

  useEffect(() => {
    list.length === 0 &&
      findFilmsPage(1, 10, 1, cityId).then((res) => {
        dispatch(changeFilmList(res.films));
      });
    return () => {};
  }, [cityId, list.length, dispatch]);

  return {
    list,
  };
};
